<template>
  <div class="seckill-setting setting">
    <template v-if="tabType == 'data'">
      <dc-list v-model="settingData.data.activityList" :leng="1">
        <template #title>选择活动</template>
        <template #deleteIcon>
          <span class="list-delete" @click="deleteItem()">删除</span>
        </template>
        <template #listItem="{ element }">
          <el-form-item label-width="28px">
            <div class="name sa-m-b-4">
              {{ element.title }}
            </div>
            <div class="amount-text"> {{ settingData.data?.goodsList.length }} 件商品 </div>
          </el-form-item>
        </template>
        <template #add>
          <el-button class="add-button" icon="Plus" @click="onAdd">添加</el-button>
        </template>
      </dc-list>
      <div class="card">
        <div class="title">商品样式</div>
        <div class="content">
          <el-form-item label="选择风格">
            <el-radio-group class="custom-radio-button" v-model="settingData.data.mode">
              <el-radio-button :label="1">
                <sa-icon icon="sa-shop-decorate-mode-1" />
              </el-radio-button>
              <el-radio-button :label="2">
                <sa-icon icon="sa-shop-decorate-mode-2" />
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <template v-for="(item, field) in settingData.data.goodsFields" :key="field">
            <template v-if="fieldLabel[field]">
              <el-form-item :label="fieldLabel[field]">
                <dc-color-picker
                  v-model="item.color"
                  v-model:show="item.show"
                  :isShow="true"
                ></dc-color-picker>
              </el-form-item>
            </template>
          </template>
        </div>
      </div>
      <template v-if="settingData.data.mode == 2">
        <div class="card">
          <div class="title">加购设置</div>
          <div class="content">
            <el-form-item label="加购按钮">
              <el-radio-group v-model="settingData.data.buyNowStyle.mode">
                <el-radio :label="1">文字</el-radio>
                <el-radio :label="2">图片</el-radio>
              </el-radio-group>
            </el-form-item>
            <template v-if="settingData.data.buyNowStyle.mode == 1">
              <el-form-item label="文字">
                <el-input v-model="settingData.data.buyNowStyle.text"></el-input>
              </el-form-item>
              <el-form-item label="背景1">
                <dc-color-picker v-model="settingData.data.buyNowStyle.color1"></dc-color-picker>
              </el-form-item>
              <el-form-item label="背景2">
                <dc-color-picker v-model="settingData.data.buyNowStyle.color2"></dc-color-picker>
              </el-form-item>
            </template>
            <el-form-item v-if="settingData.data.buyNowStyle.mode == 2" label="图片">
              <sa-uploader
                v-model="settingData.data.buyNowStyle.src"
                fileType="image"
              ></sa-uploader>
            </el-form-item>
          </div>
        </div>
      </template>
      <div class="card">
        <div class="title">商品角标</div>
        <div class="content">
          <el-form-item label="角标选择">
            <el-radio-group v-model="settingData.data.tagStyle.show">
              <el-radio :label="0">不显示</el-radio>
              <el-radio :label="1">显示</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="settingData.data.tagStyle.show == 1" label="上传图片">
            <div class="sa-flex">
              <sa-uploader v-model="settingData.data.tagStyle.src" fileType="image"></sa-uploader>
              <span class="tip">建议尺寸：36*22</span>
            </div>
          </el-form-item>
        </div>
      </div>
      <div class="card">
        <div class="title">样式</div>
        <div class="content">
          <el-form-item label="上圆角">
            <dc-slider v-model="settingData.data.borderRadiusTop"></dc-slider>
          </el-form-item>
          <el-form-item label="下圆角">
            <dc-slider v-model="settingData.data.borderRadiusBottom"></dc-slider>
          </el-form-item>
          <el-form-item label="间距">
            <dc-slider v-model="settingData.data.space"></dc-slider>
          </el-form-item>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { api as goodsApi } from '@/app/shop/admin/goods/goods.service';
import { useModal } from '@/sheep/hooks';
import dcColorPicker from '../../common/dc-color-picker.vue';
import dcList from '../../common/dc-list.vue';
import dcSlider from '../../common/dc-slider.vue';
import ActivitySelect from '@/app/shop/admin/activity/activity/select.vue';
const props = defineProps(['settingData', 'tabType']);

const fieldLabel = computed(() =>
  props.settingData.data.mode == 1
    ? {
        title: '标题',
        price: '价格',
        // original_price: '原价',
      }
    : {
        title: '商品标题',
        subtitle: '副标题',
        price: '商品价格',
        original_price: '原价',
        sales: '销量',
      },
);

function onAdd() {
  useModal(
    ActivitySelect,
    {
      title: '选择活动',
      type: 'seckill',
    },
    {
      confirm: async (res) => {
        props.settingData.data.activityList = [res.data];
        const { data } = await goodsApi.goods.activitySelect({
          activity_id: res.data.id,
        });
        props.settingData.data.goodsList = data;
      },
    },
  );
}

function deleteItem() {
  props.settingData.data.activityList = [];
  props.settingData.data.goodsList = [];
}
</script>
<style lang="scss" scoped>
.seckill-setting {
  .name {
    line-height: 16px;
    font-size: 12px;
    font-weight: 400;
    color: var(--sa-title);
  }
  .amount-text {
    line-height: 16px;
    font-size: 12px;
    font-weight: 500;
    color: var(--sa-subfont);
  }
}
</style>
